import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchCity } from './action';
import AdvWrapper from './Adv';
import LoveWrapper from './Love';
import SearchWrapper from './Search';
import SliderWrapper from './Slider';
import Loading from '../../components/Loading';

class Index extends Component {
  componentDidMount() {
    !this.props.city && this.props.fetchCity();
  }

  render() {
    const { city } = this.props;
    if (!city) return <Loading />
    return (
      <div className="home">
        <SearchWrapper />
        <SliderWrapper />
        <AdvWrapper />
        <LoveWrapper />
      </div>
    )
  }
}

export default connect(state => ({
  city: state.home.city
}), {
  fetchCity
})(Index);
